<template>
    <div v-loading="loading">
        <div @click="$router.go(-1)" style="display: flex;align-items: center;cursor: pointer;margin-bottom: 20px;">
            <i class="el-icon-arrow-left" style="font-size: 20px;color: #409eff;"></i>
             <div style="color: #409eff;">返回</div>
        </div>
        <div class="">
            <!-- <div>
                    <video class="videoBox" :src="videoUrl" controls></video>
                </div> -->
            <div class="infoBox flexSB" style="padding: 0;width: 100%;">
                <el-card style="width: 70%;">
                    <el-descriptions class="margin-top" title="帖子详情" :column="3" border>
                        <el-descriptions-item>
                            <template slot="label">
                                作品ID
                            </template>
                            {{ videoInfo.creation_id }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                评论数
                            </template>
                            {{ videoInfo.comment_count }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                观看数
                            </template>
                            {{ videoInfo.viewed }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                省份
                            </template>
                            {{ videoInfo.province }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                城市
                            </template>
                            {{ videoInfo.city }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                地区
                            </template>
                            {{ videoInfo.area }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                用户置顶
                            </template>
                            {{ videoInfo.user_top == 0 ? "否" : "是" }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                打赏计数
                            </template>
                            {{ videoInfo.tipping_count }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                推荐类型
                            </template>
                            {{ videoInfo.recommend_type == 0 ? "普通" : videoInfo.recommend_type == 1 ? "今日推荐" : "精品推荐" }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                转发数量
                            </template>
                            {{ videoInfo.forwards }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                收费金额
                            </template>
                            {{ videoInfo.fee }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                标签
                            </template>
                            <el-tag type="success" style="margin-right: 10px;" v-for="(item, index) in videoInfo.labels"
                                :key="index"> {{
                                    item }} </el-tag>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                点赞数量
                            </template>
                            {{ videoInfo.like_count }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                分类
                            </template>
                            <div v-if="videoInfo.categorys">
                                <el-tag type="success" style="margin-right: 10px;"
                                    v-for="(item, index) in videoInfo.categorys" :key="index">
                                    {{ item }} </el-tag>
                            </div>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                经度
                            </template>
                            {{ videoInfo.longitude }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                纬度
                            </template>
                            {{ videoInfo.latitude }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                用户IP
                            </template>
                            {{ videoInfo.ip }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                是否青少年模式推荐内容
                            </template>
                            {{ videoInfo.is_teenager == 0 ? "否" : "是" }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                用户详细地址
                            </template>
                            {{ videoInfo.ip_address }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                用户设备型号
                            </template>
                            {{ videoInfo.model }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                终端地址
                            </template>
                            {{ videoInfo.terminal }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                MAC地址
                            </template>
                            {{ videoInfo.mac }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                添加时间
                            </template>
                            {{ videoInfo.created_at }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                修改时间
                            </template>
                            {{ videoInfo.updated_at }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                删除时间
                            </template>
                            {{ videoInfo.deleted_at }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label">
                                操作
                            </template>
                            <template >
                                <div style="display: flex;">
                                    <div v-if="!videoInfo.deleted_at" v-permission="['ADMIN', 'POSTS_FALSE_DELETE']">
                                        <el-popconfirm @confirm="softDel(videoInfo.creation_id)" title="确定要删除这个数据吗？">
                                            <el-button size="small" slot="reference"
                                                style="margin-left: 10px;margin-top: 10px;" type="danger">软删除</el-button>
                                        </el-popconfirm>
                                        
                                    </div>
                                    <el-button v-else @click="restore(videoInfo.creation_id)" size="small" type="primary"
                                        style="margin-left: 10px;margin-top: 10px;">恢复</el-button>
                                    <el-popconfirm @confirm="hardDel(videoInfo.creation_id)" title="确定要删除这个数据吗？">
                                        <el-button size="small" slot="reference" style="margin-left: 10px;margin-top: 10px;"
                                            type="danger" v-permission="['ADMIN', 'POSTS_TRUE_DELETE']">硬删除</el-button>
                                    </el-popconfirm>
                                </div>
                            </template>
                        </el-descriptions-item>

                    </el-descriptions>


                    <!-- 帖子内容 -->
                    <div style="margin-top: 30px;margin-bottom:20px;font-weight: 700;">
                        帖子内容
                    </div>

                    <el-card style="margin-bottom: 30px;">
                        {{ videoInfo.content }}
                    </el-card>

                    <!-- 帖子图片 -->
                    <div style="margin-top: 30px;margin-bottom:20px;font-weight: 700;">
                        帖子图片
                    </div>

                    <el-card style="margin-bottom: 30px;">
                        <div class="flexFS">
                            <div v-for="(item, index) in videoInfo.media_urls" :key="index"
                                style="margin-bottom: 30px;margin-right: 30px;" @click="playShowFun(item)">
                                <el-card :body-style="{ padding: '10px' }">
                                    <el-image style="width: 150px; height: 150px" :src="item" fit="cover"></el-image>
                                </el-card>
                            </div>
                        </div>
                    </el-card>
                </el-card>
                <div v-if="videoInfo.creation_id" style="width: 30%;margin-left: 20px;">
                    <comment :creation_id="videoInfo.creation_id"></comment>
                </div>
            </div>
        </div>
    </div>
</template>
      
<script>
import comment from '@/components/comment/index'
export default {
    components: {
        comment
    },
    data() {
        return {
            visible: false,
            loading: false,
            playShow: false,
            videoInfo: {},
            videodetails: [],
            content: ""
        }
    },
    mounted() {
        //this.getworksList()
        if (this.$route.query.id) {
            console.log("this.$route.query.id", this.$route.query.id)
            this.getShortVideoDetails(this.$route.query.id)
        }


    },
    methods: {
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },

        softDel(id) {
            this.$request.del('/creation/delete_soft/' + id).then((res) => {
                this.$message.success('删除成功')
                this.$router.push({path:'/post-details-list'})
            })
        },

        hardDel(id) {
            this.$request.del('/creation/delete_real/' + id).then((res) => {
                this.$message.success('删除成功')
                this.$router.push({path:'/post-details-list'})
            })
        },
        restore(id) {
            this.$request.put('/creation/delete_soft_recover/' + id).then((res) => {
                this.$message.success('恢复成功')
                this.$router.push({path:'/post-details-list'})
            })
        },
        playShowFun(item) {
            this.videoUrl = item.media_urls[0]
            this.videoInfo = item
            this.playShow = true
        },

        getShortVideoDetails(id) {
            let that = this
            this.$request.get('/creation/info/?creation_id=' + id).then((res) => {
                console.log('res', res)
                that.videoInfo = res
                that.videoUrl = res.media_urls[0]
                that.content = res.content
            })
        },
    },
}
</script>
<style lang="scss"  scoped>
.videoBox {
    width: 1000px;
    height: 800px;
    background-color: black;

}

.el-button--text {
    margin-right: 20px !important;
}

.el-popover {
    width: 250px;
}

.flexFS {
    display: flex;
    flex-wrap: wrap;

}

.flexSB {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
</style>